<template>
  <div class="device">
    <el-tabs type="border-card">
      <el-tab-pane label="设备配置">
        <h-table :table-column="contentColumn" :table-data="contentList.data" multiple has-slot>
          <template #default="{ index, row }">
            <el-button type="text" size="mini" @click="contentEdit(index, row)">编辑</el-button>
            <span style="padding: 0 10px;color: #ccc;">|</span>
            <el-button type="text" size="mini" @click="contentDel(index, row)">删除</el-button>
          </template>
          <template v-slot:searchForm>
            <el-form :inline="true" :model="queryParams" class="demo-form-inline">
              <el-form-item label="关键字">
                <el-input v-model="queryParams.keywords" placeholder="设备名称/设备地点"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button class="h-search-btn" @click="resetForm">重置</el-button>
              </el-form-item>
            </el-form>
            <el-button type="primary" @click="showDialog">新增</el-button>
            <el-button type="primary" @click="sync" style="margin-bottom:20px;">同步</el-button>
          </template>
          <template v-slot:pagination>
            <el-pagination
              layout="prev,pager,next"
              :total="contentList.page.total"
              :current-page="contentList.page.currentPage"
              background
            ></el-pagination>
          </template>
        </h-table>
      </el-tab-pane>
    </el-tabs>
    <h-dialog
      :dialogVisible="dialogVisible"
      @close="closeDialog"
      @add="addDevice"
      :title="dialogTitle"
      :data="dialogData"
    ></h-dialog>
  </div>
</template>

<script>
import HTable from '../common/table.vue'
import HDialog from '../common/dialog.vue'
export default {
  name: "device",
  data() {
    return {
      queryParams: {
        keywords: ""
      },
      contentColumn: [
        {
          label: "设备编号",
          prop: "id",
          isSort: true
        },
        {
          label: "设备名称",
          prop: "name",
          isSort: false
        },
        {
          label: "设备分类",
          prop: "type",
          isSort: false
        },
        {
          label: "设备地点",
          prop: "address",
          isSort: false
        },
        {
          label: "设备来源",
          prop: "from",
          isSort: false
        },
        {
          label: "是否在慧眼屏展示",
          prop: "show",
          isSort: false
        },
        {
          label: "视频流媒体地址",
          prop: "streamUrl",
          isSort: false,
          width: 350
        },
        {
          label: "场地址",
          prop: "cname",
          isSort: false,
          width: 350
        }
      ],
      contentList: {
        page: {
          total: 1,
          currentPage: 1
        },
        data: [
          {
            id: "camera-001",
            name: "视频1@弘昌01(广角)",
            type: "摄像头",
            address: "视频1@弘昌01(广角)",
            from: "同步",
            show: "是",
            streamUrl: "http://www.intellif.com/abc/ddeceee/stream.flv",
            cname: "仓储区/仓库-z-Z3-1,仓储区/仓库-Z-Z3"
          },
          {
            id: "camera-002",
            name: "视频1@弘昌02(广角)",
            type: "摄像头",
            address: "视频1@弘昌02(广角)",
            from: "同步",
            show: "是",
            streamUrl: "http://www.intellif.com/abc/ddeceee/stream.flv",
            cname: "仓储区/仓库-z-Z3-2,仓储区/仓库-Z-Z3"
          },
          {
            id: "camera-003",
            name: "弘昌物流03",
            type: "摄像头",
            address: "弘昌物流03",
            from: "手工添加",
            show: "否",
            streamUrl: "http://www.intellif.com/abc/ddeceee/stream.flv",
            cname: "仓储区/仓库-z-Z3-3,仓储区/仓库-Z-Z3"
          },
          {
            id: "camera-004",
            name: "苏浒路入口",
            type: "摄像头",
            address: "苏浒路",
            from: "同步",
            show: "是",
            streamUrl: "http://www.intellif.com/abc/ddeceee/stream.flv",
            cname: "苏浒路,浦东新区,上海市"
          },
          {
            id: "camera-005",
            name: "苏浒路出口",
            type: "摄像头",
            address: "苏浒路出口",
            from: "同步",
            show: "是",
            streamUrl: "http://www.intellif.com/abc/ddeceee/stream.flv",
            cname: "苏浒路,浦东新区,上海市"
          },
          {
            id: "camera-006",
            name: "人脸零担区南通道",
            type: "其他",
            address: "人脸零担区南通道",
            from: "手工添加",
            show: "否",
            streamUrl: "http://www.intellif.com/abc/ddeceee/stream.flv",
            cname: "广告位-交易楼-入口横梁东"
          },
          {
            id: "camera-007",
            name: "西安路人行道",
            type: "摄像头",
            address: "西安路人行道",
            from: "手工添加",
            show: "否",
            streamUrl: "http://www.intellif.com/abc/ddeceee/stream.flv",
            cname: "西安路-外滩-上海市"
          },
          {
            id: "camera-008",
            name: "花园小区东门",
            type: "摄像头",
            address: "花园小区东门",
            from: "同步",
            show: "否",
            streamUrl: "http://www.intellif.com/abc/ddeceee/stream.flv",
            cname: "子午路-浦东区-上海市"
          },
          {
            id: "camera-009",
            name: "后卫寨地铁口",
            type: "摄像头",
            address: "后卫寨地铁口",
            from: "手工添加",
            show: "否",
            streamUrl: "http://www.intellif.com/abc/ddeceee/stream.flv",
            cname: "天章大道-浦东区-上海市"
          },
          {
            id: "camera-010",
            name: "中投国际大厦",
            type: "摄像头",
            address: "中投国际大厦",
            from: "手工添加",
            show: "否",
            streamUrl: "http://www.intellif.com/abc/ddeceee/stream.flv",
            cname: "锦业一路-高新区"
          }
        ]
      },
      dialogVisible: false,
      dialogTitle: "新增设备",
      dialogData: {}
    };
  },
  components: {
    HDialog,
    HTable
  },
  methods: {
    contentEdit(index, row) {
      this.dialogData = row;
      this.dialogTitle = "编辑设备";
      this.dialogVisible = true;
    },
    contentDel() {},
    queryContent() {},
    onSubmit() {},
    resetForm() {
      this.queryParams.keywords = "";
    },
    showDialog() {
      this.dialogData = {};
      this.dialogVisible = true;
    },
    sync() {},
    closeDialog() {
      this.dialogVisible = false;
    },
    addDevice(device) {
      this.closeDialog();
      console.dir(device);
    }
  }
};
</script>

<style lang="less">
.el-tabs--border-card {
  border: none !important;
  box-shadow: none !important;
}
</style>